<template>
  <div>
    <div class="course-study main-contianer2">
      <div class="left-list">
        <el-row style="margin: 20px 0;">
          <el-col>
            <el-button type="primary" icon="el-icon-plus" @click="addClass=true">添加课程</el-button>
            <el-button type="primary" icon="el-icon-menu" @click="goToHistory">历史在线课堂</el-button>
          </el-col>
        </el-row>
        <el-calendar v-model="value"></el-calendar>
      </div>
      <div class="right-content">
        <div class="online-box" v-for="item in list" :key="item.id">
          <div class="online-left">
            <div class="online-title">课题：{{item.resourceLessonName}}</div>
            <div class="online-item">课程：{{item.lessonProject}}</div>
            <div class="online-item">主讲：{{item.speaker}}</div>
            <div class="online-item">班级：{{item.classNames}}</div>
            <div class="online-item">时间：{{item.startTime}} - {{item.endTime}}</div>
          </div>
          <div class="online-right" v-if="item.onlineLessonState === '1'">
            <div class="online-tag2">未开课</div>
            <el-button type="primary" plain @click="handleEditClass(item)">编辑课程</el-button>
          </div>
          <div class="online-right" v-if="item.onlineLessonState === '1'">
            <div class="online-tag">进行中</div>
            <div class="online-time">{{returnDate(item.nowToStartTime)}}</div>
            <el-button type="primary" @click="goToView(item)">进入课堂</el-button>
          </div>
          <div class="online-right" v-if="item.onlineLessonState === '3'">
            <div class="online-tag2">已结束</div>
            <el-button type="primary" @click="handleCount(item)">进入课堂</el-button>
          </div>
        </div>
      </div>
    </div>
    <class-box :course="course" v-if="addClass" @handleEmit="handleClass"/>
    <count-box :id="onlineLessonId" :onlineLesson="course" v-if="isShowCount" @handleEmit="isShowCount=false"/>
  </div>
</template>

<script>
import { teachingCalendar } from '@/api/teacher/onlineCourse'
import moment from 'moment'
import classBox from './classBox'
import countBox from './countBox'
export default {
  data () {
    return {
      value: new Date(),
      list: [],
      addClass: false,
      onlineLessonId: undefined,
      course: undefined,
      isShowCount: false
    }
  },
  methods: {
    async teachingCalendar () {
      const data = {
        startDay: moment(this.value).format('YYYY-MM-DD')
      }
      const res = await teachingCalendar(data)
      this.list = res.data
    },
    goToView (item) {
      this.$router.push({
        name: 'onlineLessonView',
        query: {
          id: item.id,
          lessonProject: item.lessonProject
        },
        params: {
          info: item
        }
      })
    },
    handleCount (item) {
      this.course = item
      this.onlineLessonId = item.id
      this.isShowCount = true
    },
    handleEditClass (item) {
      this.course = item
      this.addClass = true
    },
    // 添加成功
    handleClass (params) {
      this.course = undefined
      this.addClass = false
      if (params) {
        this.teachingCalendar()
      }
    },
    // 历史在线课堂
    goToHistory () {
      this.$router.push({
        name: 'onlineHistory'
      })
    },
    returnDate (time) {
      if (time < 60) {
        return time < 10 ? '00:0' + time : '00:' + time
      } else if (time < 3600) {
        return Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60) : Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60)
      } else {
        return '大于一小时'
      }
    }
  },
  components: {
    classBox,
    countBox
  },
  mounted () {
    this.teachingCalendar()
  },
  watch: {
    value: {
      deep: true,
      handler (val) {
        this.teachingCalendar()
      }
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .course-study {
    height: 937px;
    width: 1200px;
    margin: 0 auto;
    .left-list {
      width: 452px;
      height: 100%;
    }
    .right-content {
      width: 728px;
      height: 100%;
      background: #fff;
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      overflow-y: scroll;
    }
  }
</style>
